<template>
  <div>
    <el-card class="top">
      <el-row>
        <el-col :span="3">
          <div class="avatar-container">
            <img :src="userInfo.userAvatarUrl" @mouseover="showEditButton = true" @mouseleave="showEditButton = false">
          </div>
        </el-col>
        <el-col :span="20">
          <div class="text">
            <p>{{ userInfo.userName }}</p>
          </div>
          <p>{{ userInfo.signature }}</p>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="info">
      <div slot="header" style="display: flex; justify-content: space-between">
        <div class="text">详细信息</div>
      </div>
      <el-form ref="form" :model="userInfo" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="userInfo.userName" />
        </el-form-item>
        <!-- 输入学院 -->
        <el-form-item label="学院" prop="userCollege">
          <el-select
            v-model="userInfo.userCollege"
            filterable
            placeholder="请选择你的学院"
            style="width: 100%"
          >
            <el-option
              v-for="colloge in colloges"
              :key="colloge.id"
              :label="colloge.name"
              :value="colloge.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="userInfo.studentId" />
        </el-form-item>
        <el-form-item label="联系方式" prop="userPhonenumber">
          <el-input v-model="userInfo.userPhonenumber" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="onSubmit">修改信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateInfo, getInfo } from '@/api/userInfo'
import { getId } from '@/utils/auth' // get token from cookie

export default {
  data() {
    return {
      userInfo: {
      },
      colloges: [
        {
          id: 1,
          name: '计算机科学与工程学院/软件学院'
        },
        {
          id: 2,
          name: '文学院 / 新闻与传播学院'
        },
        {
          id: 3,
          name: '马克思主义学院'
        },
        {
          id: 4,
          name: '政治与公共管理学院'
        },
        {
          id: 5,
          name: '教育学部/ 教师教育学院 （田家炳教育书院）'
        },
        {
          id: 6,
          name: '美术学院'
        },
        {
          id: 7,
          name: '数学与统计学院'
        },
        {
          id: 8,
          name: '化学与药学学院'
        },
        {
          id: 9,
          name: '环境与资源学院'
        },
        {
          id: 10,
          name: '体育与健康学院'
        },
        {
          id: 11,
          name: '职业技术师范学院'
        },
        {
          id: 12,
          name: '国际文化教育学院'
        },
        {
          id: 13,
          name: '历史文化与旅游学院'
        },
        {
          id: 14,
          name: '法学院/律师学院'
        },
        {
          id: 15,
          name: '经济管理学院'
        },
        {
          id: 16,
          name: '外国语学院'
        },
        {
          id: 17,
          name: '音乐学院'
        },
        {
          id: 18,
          name: '物理科学与技术学院'
        },
        {
          id: 19,
          name: '生命科学学院'
        },
        {
          id: 20,
          name: '电子与信息工程学院/集成电路学院'
        },
        {
          id: 21,
          name: '设计学院'
        }
      ],
      reserveDialog: false,
      rules: {
        userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        studentId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
        userCollege: [{ required: true, message: '请选择学院', trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  created() {
    const user_id = getId()
    console.log('得到用户的ID是：', user_id)
    getInfo(user_id).then((result) => {
      this.userInfo = result.data.user
      console.log('获取的用户信息：', this.userInfo)
    }).catch(() => {
      console.log('123获取信息失败，请检查！')
    }
    )
    this.$store.dispatch('app/toggleSideBarHide', true)
  },
  methods: {
    // 检查手机号是否填写正确
    checkPhone(rule, value, callback) {
      const mobileReg = /^1[3456789]\d{9}$/
      if (!mobileReg.test(value)) {
        callback(new Error('手机号格式不正确！'))
      } else {
        callback()
      }
    },
    onSubmit() {
      this.$confirm('您是否确认要修改信息?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateInfo({
          'userId': this.userInfo.userId,
          'userName': this.userInfo.userName,
          'userType': this.userInfo.userType,
          'userPassword': this.userInfo.userPassword,
          'studentId': this.userInfo.studentId,
          'userPhoneNumber': this.userInfo.userPhoneNumber,
          'userColloge': this.userInfo.userColloge
        }).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '修改失败，请检查!'
          })
        }
        )
      }).catch(() => {
        // 取消修改信息逻辑
        this.$message.info('取消修改信息')
      })
    },
    remove() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-container {
  margin: auto; /* 如果需要，可以删除这个样式 */
}
.avatar-container img {
  width: 100px; /* 设置头像的宽度，根据需要调整 */
  height: 100px; /* 设置头像的高度，根据需要调整 */
  border-radius: 50%; /* 设置为圆形 */
  display: block; /* 使图片作为块级元素 */
  margin: 0 auto; /* 水平居中 */
  object-fit: cover; /* 如果图片不是正方形，这将确保图片覆盖整个区域而不变形 */
}
.top {
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  .text {
    font-weight: bold;
    font-size: 30px;
  }
}
.info {
  margin-top: 40px;
  margin-right: 20px;
  margin-left: 20px;
  .text {
    font-weight: bold;
    font-size: 30px;
  }
  .causality {
    background-color: rgb(236, 236, 236);
    padding: 5px;
    height: 100px;
    width: 200px;
  }
}
.user-avatar {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
.el-form {
  text-align: center;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
